<template>
  <div class="user-center-container">
    <!-- 顶部用户信息 -->
    <UserProfile/>
    
    <!-- 主体内容 -->
    <div class="user-main">
      <!-- 左侧导航 -->
      <UserNav :active-tab="activeTab" @tab-change="handleTabChange" />
      
      <!-- 右侧内容 -->
      <div class="user-content">
        <!-- 地址管理 -->
        <AddressSection 
          v-if="activeTab === 'address'" 
          :addresses="addresses"
          @edit-address="handleEditAddress"
          @set-default="setDefaultAddress"
          @delete-address="deleteAddress"
        />
        
        <!-- 收藏管理 -->
        <FavoriteSection 
          v-if="activeTab === 'favorites'" 
          :favorites="favorites"
          @remove-favorite="removeFavorite"
          @add-to-cart="addToCart"
          @buy-now="buyNow"
        />
        
        <!-- 账户安全 -->
        <SecuritySection v-if="activeTab === 'security'" />
        
        <!-- 快捷入口 -->
        <QuickSection v-if="activeTab === 'quick'" @quick-click="handleQuickClick" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import UserProfile from '@/components/user/UserProfile.vue'
import UserNav from '@/components/user/UserNav.vue'
import AddressSection from '@/components/user/AddressSection.vue'
import FavoriteSection from '@/components/user/FavoriteSection.vue'
import SecuritySection from '@/components/user/SecuritySection.vue'
import QuickSection from '@/components/user/QuickSection.vue'

import { userAPI, addressAPI } from '@/http'

let user = ref({})
let couponNum = ref(0)
let myorderlist = ref([])

async function fetchPersonInfo() {
  const response = await userAPI.getUserInfo()
  // console.log(response.data)  // 测试获取用户信息

  user.value = response.data.user.data
  couponNum.value = response.data.couponNum
  myorderlist.value = response.data.myorderlist

  // console.log(user.value.userNickname)  // 测试获取用户昵称
  
  // 用户数据
  userData.value = {
    avatar: user.value.userHeading,
    username: user.value.userNickname,
    level: '黄金会员',
    points: user.value.userPoint,
    coupons: couponNum.value,
  }
  // console.log(userData.value)  // 测试赋值用户数据
}

onMounted(() => {
  fetchPersonInfo()
})
// 用户数据
let userData = ref({})

// 当前选中的标签
const activeTab = ref('address')

const addresses = ref([])

async function fetchAddress() {
  const response = await addressAPI.getAddress()
  console.log(response.data)  // 测试获取地址列表

  addresses.value = response.data
  console.log(addresses.value)  // 测试赋值地址列表
  console.log(addresses.value)  // 比较本地地址列表
}

onMounted(() => {
  fetchAddress()
})

// 地址数据
const address = ref([
  {
    id: 1,
    receiver: '张三',
    phone: '13800138000',
    province: '广东省',
    city: '深圳市',
    district: '南山区',
    detail: '科技园路123号',
    isDefault: true
  },
  {
    id: 2,
    receiver: '李四',
    phone: '13900139000',
    province: '北京市',
    city: '北京市',
    district: '朝阳区',
    detail: '建国路88号',
    isDefault: false
  }
])

// 收藏数据
const favorites = ref([
  {
    id: 1,
    name: '智能手机X Pro',
    image: 'https://example.com/product1.jpg',
    price: 2999.00,
    category: '手机',
    favoritedAt: '2023-05-10'
  },
  {
    id: 2,
    name: '无线蓝牙耳机',
    image: 'https://example.com/product2.jpg',
    price: 199.00,
    category: '耳机',
    favoritedAt: '2023-05-12'
  }
])

// 处理标签切换
const handleTabChange = (tab) => {
  activeTab.value = tab
}

// 地址操作
const handleEditAddress = (address) => {
  console.log('编辑地址:', address)
  // 实际项目中这里应该打开编辑对话框
}

const setDefaultAddress = (id) => {
  addresses.value.forEach(addr => {
    addr.isDefault = addr.id === id
  })
}

const deleteAddress = (id) => {
  addresses.value = addresses.value.filter(addr => addr.id !== id)
}

// 收藏操作
const removeFavorite = (id) => {
  favorites.value = favorites.value.filter(item => item.id !== id)
}

const addToCart = (item) => {
  console.log('加入购物车:', item)
}

const buyNow = (item) => {
  console.log('立即购买:', item)
}

// 快捷入口操作
const handleQuickClick = (item) => {
  console.log('点击快捷入口:', item)
}
</script>

<style scoped>
.user-center-container {
  min-height: 100vh;
  background-color: #fff9f0;
  padding: 20px;
}

.user-main {
  display: flex;
  margin-top: 20px;
  gap: 20px;
}

.user-content {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(255, 165, 0, 0.1);
}
</style>